<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title>个人的详情页</title>
		<link rel="stylesheet" href="css/mui.css" />
		<link rel="stylesheet" href="css/main.css" />
	    <link rel="stylesheet" href="css/author-homepage.css" />
        <link rel="stylesheet" href="iconfont/iconfont.css" />
	    <style>
		   #slider,.mui-content{
                width: 100%;
                height: 100%;
            }
            .mui-scroll-wrapper{
            	width:100%;
            	height:auto;
            	overflow: scroll;
            }
            .mui-slider-group{
                height:100%!important;
                overflow: visible;
                background: #fff;
            }
            
		</style>
	</head>
	<body>
		<!--header开始-->
		<header-filter style="height:5.4rem;">
		<header-mask></header-mask>
		</header-filter>
		<header style="height:4.6rem;">
			<main>
				<div class="title">
					<span class="iconfont icon-fanhui mui-action-back"></span>
					<span class="iconfont icon-more"></span>
				</div>
				<!--作者的信息-->
				<div class="authorhp_info">
					<div class="authorhp_img" style="background-image: url(img/aimg.png);"></div>
				    <div class="authorhp_name">滑稽猫滑稽狗</div>
				    <div class="authorhp_nicheng">我是一只滑稽的猫</div>
				    <!--<div class="authorhp_option">
				    	<div class="pletter">私信</div>
				    	<div class="pletter pletter-active">关注</div>
				    </div>-->
				    <ul class="authorhp_list">
				    	<li>
				    		<p class="list_title">人气值</p>
				    		<p class="list_info">12534</p>
				    	</li>
				    	<li>
				    		<p class="list_title">关注</p>
				    		<p class="list_info">12534</p>
				    	</li>
				    	<li>
				    		<p class="list_title">粉丝</p>
				    		<p class="list_info">12534</p>
				    	</li>
				    </ul>
				</div>
			</main>
		</header>
	    <div class="header" style="height:4.6rem;"></div>
	    <!--header结束-->
	    <!--内容导航开始-->
	    <section class="content" >
	    	<!--返回键定位开始-->
	    	<div class="backtop">
	    		<span class="iconfont icon-top"></span>
	    	</div>
	    	<!--返回键定位结束-->
		    	<div class="mui-content">
 				  <div id="slider" class="mui-slider"  style="position:relative;">
					<div id="sliderSegmentedControl" class="author-listnav mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					    <a class="mui-control-item mui-active" href="#item1author">关于我</a>
						<a class="mui-control-item" href="#item2author">动态</a>
						<a class="mui-control-item" href="#item3author">作品库</a>
				        <a class="mui-control-item" href="#item4author">文章</a>
					</div>
				  <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
			    	<div class="mui-slider-group mui-fullscreen">
					<div id="item1author" class="mui-slider-item mui-control-content ">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<!--默认显示关于他开始-->
								<div class="aboutheBox">
									<!--标题-->
									<div class="abouthe-title" style="background: #fff;">
										<p>我的徽章</p>
										<div class="badgeBox">
											<div style="background-image: url(img/icon_huiz@2x.png);"></div>
											<div style="background-image: url(img/icon_huiz@2x.png);"></div>
											<div style="background-image: url(img/icon_huiz@2x.png);"></div>
											<div style="background-image: url(img/icon_huiz@2x.png);"></div>
										</div>
									</div>
								    <!--详细内容-->
								    <div class="abouthe-info">
								    	<p class="eminfo" style="margin-bottom:0.4rem">个人资料</p>
								    	<div class="eminfobox">
								    		<p class="eminfo-title">用户名</p>
								    		<p class="eminfo">谢娜</p>
								    	</div>
								    	<div class="eminfobox">
								    		<p class="eminfo-title">性别</p>
								    		<p class="eminfo">女</p>
								    	</div>
								    	<div class="eminfobox">
								    		<p class="eminfo-title">所在地</p>
								    		<p class="eminfo">浙江省杭州市</p>
								    	</div>
								    	<div class="eminfobox">
								    		<p class="eminfo-title">经验介绍</p>
								    		<p class="eminfo">暂无</p>
								    	</div>
								    </div>
								</div>
							    <!--默认显示关于他结束-->
							</div>
						</div>
					</div>
					<div id="item2author" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								 <div class="lists" style="background: #fff;">	
    		 <main>
    			<div class="clist-title">
    				<ul class="clist-title-left">
	    				<li>
	    					<a href="" class="authorList" style="display:block; ">
	    						<img src="img/aimg.png" alt="" />
	    					</a>	
	    				</li>
	    				<li>芝士</li>
	    				<li>单图</li>
    				</ul>
    				<li>一分钟前</li>
    			</div>
    		   <!--主题图片-->
    		   <a href="" class="clist-imgBox" style="display: block;">
    		   	   <img src="img/aimg.png" alt="" class="clist-img"/>
    		   </a>
    		   <div class="imgtitle">酉游记—最终版</div>
    		   <!--底部分享等列表-->
    		   <ul class="clist-operation">
    		   	<li>
    		   	   <img src="img/icon_zhuanfa_d@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   	<li>
    		   	   <img src="img/icon_soucang@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   	<li>
    		   	   <img src="img/icon_comment@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   	<li>
    		   	   <img src="img/icon_zan@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   </ul>
    		    </main>
    		</div>
    		<!--文章-->
    		    <div class="articleListBox" style="background: #fff;padding-top:0.4rem">
             <main>
    	    	<ul class="articleList">
	    	   	   <li>
	    	   	   	  <div class="articleList-title">
	    	   	   	  	<a href="">如何成为一个优秀的插画师</a>
	    	   	   	  	<div class="articleList-clssify">文章</div>
	    	   	   	  </div>
	    	   	   	  <div class="articleList-author">
	    	   	   	  	<span>By</span>
	    	   	   	  	<span>我好像生病了</span>
	    	   	   	  </div>
	    	   	   	  <div class="articleList-info">
	    	   	   	  	  <a href="" style="display: inline-block;" >
	    	   	   	  	  	毕业到现在一直做各种设计，由于工作的设计内容比较散，所以每次设计的时候经常会拿到设...
	    	   	   	  	  </a>
	    	   	   	  </div>
	    	   	   </li>
	    	   	   <li class="articleList-img">
	    	   	   	  <a href="" style="display: block;"><img src="img/aimg.png" alt="" /></a>
	    	   	   </li>
    	   	   </ul>
    	   	   <!--底部分享等列表-->
    		   <ul class="clist-operation">
	    		   	<li>
	    		   	   <img src="img/icon_zhuanfa_d@2x.png" alt=""  style="width:0.36rem;height:0.36rem;"/>
	    		   	   <span>69</span>
	    		   	</li>
	    		   	<li>
	    		   	   <img src="img/icon_soucang@2x.png"  style="width:0.36rem;height:0.36rem;"/>
	    		   	   <span>69</span>
	    		   	</li>
	    		   	<li>
	    		   	   <img src="img/icon_comment@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
	    		   	   <span>69</span>
	    		   	</li>
	    		   	<li>
	    		   	   <img src="img/icon_zan@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
	    		   	   <span>69</span>
	    		   	</li>
    		   </ul>
    		  </main>
    	   </div>
    	   <!--文章-->
    		    <div class="articleListBox" style="background: #fff;padding-top:0.4rem">
             <main>
    	    	<ul class="articleList">
	    	   	   <li>
	    	   	   	  <div class="articleList-title">
	    	   	   	  	<a href="">如何成为一个优秀的插画师</a>
	    	   	   	  	<div class="articleList-clssify">文章</div>
	    	   	   	  </div>
	    	   	   	  <div class="articleList-author">
	    	   	   	  	<span>By</span>
	    	   	   	  	<span>我好像生病了</span>
	    	   	   	  </div>
	    	   	   	  <div class="articleList-info">
	    	   	   	  	  <a href="" style="display: inline-block;" >
	    	   	   	  	  	毕业到现在一直做各种设计，由于工作的设计内容比较散，所以每次设计的时候经常会拿到设...
	    	   	   	  	  </a>
	    	   	   	  </div>
	    	   	   </li>
	    	   	   <li class="articleList-img">
	    	   	   	  <a href="" style="display: block;"><img src="img/aimg.png" alt="" /></a>
	    	   	   </li>
    	   	   </ul>
    	   	   <!--底部分享等列表-->
    		   <ul class="clist-operation">
	    		   	<li>
	    		   	   <img src="img/icon_zhuanfa_d@2x.png" alt=""  style="width:0.36rem;height:0.36rem;"/>
	    		   	   <span>69</span>
	    		   	</li>
	    		   	<li>
	    		   	   <img src="img/icon_soucang@2x.png"   style="width:0.36rem;height:0.36rem;"/>
	    		   	   <span>69</span>
	    		   	</li>
	    		   	<li>
	    		   	   <img src="img/icon_comment@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
	    		   	   <span>69</span>
	    		   	</li>
	    		   	<li>
	    		   	   <img src="img/icon_zan@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
	    		   	   <span>69</span>
	    		   	</li>
    		   </ul>
    		  </main>
    	   </div>
    	<!--文字-->
    	<div class="lists" style="padding-bottom:0.2rem;background: #fff;">	
    	  	<main>
    			<div class="clist-title">
    				<ul class="clist-title-left">
	    				<li>
	    					<a href="" class="authorList" style="display:block; ">
	    						<img src="img/aimg.png" alt="" />
	    					</a>	
	    				</li>
	    				<li>芝士</li>
    				</ul>
    				<li>一分钟前</li>
    			</div>
    		   <!--主题图片-->
	    		  <a href="" style="display: block;margin-top:0.3rem;">
	    		  	<p style="font-size:0.28rem;color:#222">人的一生，就像被放飞的风筝，总想飞得更高，
	    		  		飞往更广阔的世界，却被冥冥中的丝线牵着，走不脱，
	    		  		等风雨一过，牵着的线断了，我们也飞不动了，
	    		  		此刻才无比怀念当初的那份牵引。因为线的那头，住着我们一生中最重要的人。</p>
	    		  </a>
    		   <!--底部分享等列表-->
    		   <ul class="clist-operation">
    		   	<li>
    		   	   <img src="img/p_icon_look@2x.png" alt="" style="width:0.36rem;height:0.222rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   	<li>
    		   	   <img src="img/icon_comment@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   	<li>
    		   	   <img src="img/icon_zan@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   </ul>
    	  	<main>
    		</div>
							</div>
						</div>

					</div>
					<div id="item3author" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								
								<div class="lists" style="background: #fff;">	
    		 <main>
    			<div class="clist-title">
    				<ul class="clist-title-left">
	    				<li>
	    					<a href="" class="authorList" style="display:block; ">
	    						<img src="img/aimg.png" alt="" />
	    					</a>	
	    				</li>
	    				<li>芝士</li>
	    				<li>单图</li>
    				</ul>
    				<li>一分钟前</li>
    			</div>
    		   <!--主题图片-->
    		   <a href="" class="clist-imgBox" style="display: block;">
    		   	   <img src="img/aimg.png" alt="" class="clist-img"/>
    		   </a>
    		   <div class="imgtitle">酉游记—最终版</div>
    		   <!--底部分享等列表-->
    		   <ul class="clist-operation">
    		   	<li>
    		   	   <img src="img/icon_zhuanfa_d@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   	<li>
    		   	   <img src="img/icon_soucang@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   	<li>
    		   	   <img src="img/icon_comment@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   	<li>
    		   	   <img src="img/icon_zan@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   </ul>
    		    </main>
    		</div>
    			<div class="lists" style="background: #fff;">	
    		 <main>
    			<div class="clist-title">
    				<ul class="clist-title-left">
	    				<li>
	    					<a href="" class="authorList" style="display:block; ">
	    						<img src="img/aimg.png" alt="" />
	    					</a>	
	    				</li>
	    				<li>芝士</li>
	    				<li>单图</li>
    				</ul>
    				<li>一分钟前</li>
    			</div>
    		   <!--主题图片-->
    		   <a href="" class="clist-imgBox" style="display: block;">
    		   	   <img src="img/aimg.png" alt="" class="clist-img"/>
    		   </a>
    		   <div class="imgtitle">酉游记—最终版</div>
    		   <!--底部分享等列表-->
    		   <ul class="clist-operation">
    		   	<li>
    		   	   <img src="img/icon_zhuanfa_d@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   	<li>
    		   	   <img src="img/icon_soucang@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   	<li>
    		   	   <img src="img/icon_comment@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   	<li>
    		   	   <img src="img/icon_zan@2x.png" alt=""  style="width:0.36rem;height:0.36rem;"/>
    		   	   <span>69</span>
    		   	</li>
    		   </ul>
    		    </main>
    		</div>
							</div>
						</div>
					</div>
					<div id="item4author" class="mui-slider-item mui-control-content">
						<div id="scroll4" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="sortingBox">
									<p>共上传  &nbsp;<span>30个创作</span></p>
									<div class="sorting">
										<div style="margin-right:0.2rem;">时间最新</div>
										<div class="iconfont icon-bottom"></div>
									</div>
									<ul class="sortingbox">
										<li class="sortingbox-active">时间最新</li>
										<li>评论最多</li>
										<li>点赞最多</li>
									</ul>
								</div>
								<div class="articleListBox" style="background: #fff;padding-top:0.4rem">
					             <main>
					    	    	<ul class="articleList">
						    	   	   <li>
						    	   	   	  <div class="articleList-title">
						    	   	   	  	<a href="">如何成为一个优秀的插画师</a>
						    	   	   	  	<div class="articleList-clssify">文章</div>
						    	   	   	  </div>
						    	   	   	  <div class="articleList-author">
						    	   	   	  	<span>By</span>
						    	   	   	  	<span>我好像生病了</span>
						    	   	   	  </div>
						    	   	   	  <div class="articleList-info">
						    	   	   	  	  <a href="" style="display: inline-block;" >
						    	   	   	  	  	毕业到现在一直做各种设计，由于工作的设计内容比较散，所以每次设计的时候经常会拿到设...
						    	   	   	  	  </a>
						    	   	   	  </div>
						    	   	   </li>
						    	   	   <li class="articleList-img">
						    	   	   	  <a href="" style="display: block;"><img src="img/aimg.png" alt="" /></a>
						    	   	   </li>
					    	   	   </ul>
					    	   	   <!--底部分享等列表-->
					    		   <ul class="clist-operation">
						    		   	<li>
						    		   	   <img src="img/icon_zhuanfa_d@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
						    		   	   <span>69</span>
						    		   	</li>
						    		   	<li>
						    		   	   <img src="img/icon_soucang@2x.png"   style="width:0.36rem;height:0.36rem;"/>
						    		   	   <span>69</span>
						    		   	</li>
						    		   	<li>
						    		   	   <img src="img/icon_comment@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
						    		   	   <span>69</span>
						    		   	</li>
						    		   	<li>
						    		   	   <img src="img/icon_zan@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
						    		   	   <span>69</span>
						    		   	</li>
					    		   </ul>
					    		  </main>
					    	   </div>
					    	   <div class="articleListBox" style="background: #fff;padding-top:0.4rem">
					             <main>
					    	    	<ul class="articleList">
						    	   	   <li>
						    	   	   	  <div class="articleList-title">
						    	   	   	  	<a href="">如何成为一个优秀的插画师</a>
						    	   	   	  	<div class="articleList-clssify">文章</div>
						    	   	   	  </div>
						    	   	   	  <div class="articleList-author">
						    	   	   	  	<span>By</span>
						    	   	   	  	<span>我好像生病了</span>
						    	   	   	  </div>
						    	   	   	  <div class="articleList-info">
						    	   	   	  	  <a href="" style="display: inline-block;" >
						    	   	   	  	  	毕业到现在一直做各种设计，由于工作的设计内容比较散，所以每次设计的时候经常会拿到设...
						    	   	   	  	  </a>
						    	   	   	  </div>
						    	   	   </li>
						    	   	   <li class="articleList-img">
						    	   	   	  <a href="" style="display: block;"><img src="img/aimg.png" alt="" /></a>
						    	   	   </li>
					    	   	   </ul>
					    	   	   <!--底部分享等列表-->
					    		   <ul class="clist-operation">
						    		   	<li>
						    		   	   <img src="img/icon_zhuanfa_d@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
						    		   	   <span>69</span>
						    		   	</li>
						    		   	<li>
						    		   	   <img src="img/icon_soucang@2x.png"   style="width:0.36rem;height:0.36rem;"/>
						    		   	   <span>69</span>
						    		   	</li>
						    		   	<li>
						    		   	   <img src="img/icon_comment@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
						    		   	   <span>69</span>
						    		   	</li>
						    		   	<li>
						    		   	   <img src="img/icon_zan@2x.png" alt=""   style="width:0.36rem;height:0.36rem;"/>
						    		   	   <span>69</span>
						    		   	</li>
					    		   </ul>
					    		  </main>
					    	   </div>
							</div>
						</div>

					</div>
				  </div>
				  </div>
				</div>
	    </section>
	    <!--内容导航结束-->
	    <!--分享开始-->
	    <!--三个小点点点开之后出现的东西-->
		<div class='forward' lll='forward'>
			<ul class='forwardListbox'>
				<li class='forwardList'>
					<i class='inline_logo forward_logo forward_QQ'></i>
					<span class='forward_text'>QQ</span>
				</li>
				<li class='forwardList'>
					<i class='inline_logo forward_logo forward_WB'></i>
					<span class='forward_text'>微博</span>
				</li>
				<li class='forwardList'>
					<i class='inline_logo forward_logo forward_WX'></i>
					<span class='forward_text'>微信</span>
				</li>
				<li class='forwardList'>
					<i class='inline_logo forward_logo forward_PYQ'></i>
					<span class='forward_text'>朋友圈</span>
				</li>
				<li class='forwardList'>
					<i class='inline_logo forward_logo forward_DEL'></i>
					<span class='forward_text'>黑名单</span>
				</li>
			</ul>
			<p class='forward_cancel'>取消</p >
		</div>
	    <!--分享结束-->
	    <!--黑名单开始-->
	    <div class="blacklistBox" showbl="blacklistBox">
	    	<ul class="blacklistbox">
	    		<li>
	    			加入黑名单后，首页将屏蔽TA发布的内容，
	    			TA不能对你发布的内容进行赞评转操作，
	    			也不能打赏与投食。
	    		</li>
	    		<li class="backlistbox-ok">确定加入黑名单</li>
	    		<li class="backlistbox-cancel">取消</li>
	    	</ul>
	    </div>
	    <!--黑名单结束-->
	    
	</body>
<script src="js/mui.js"></script>
<script src="js/pxtorem.js"></script>
<script src="js/scrollnone.js"></script>
<script type="text/javascript" src="js/author-homepage.js"></script>
<script src="js/apptool.js"></script>
<script>
	mui.init();
	mui.plusReady(function(e){
		mui('.abouthe-title')[0].addEventListener('tap',function(){
			webtool.openPreView('achievement',function(wb){
			   wb.show('slide-in-right',300)
			})
		})
	})
</script>
</html>
